<template>
  <n-tabs type="line">
    <n-tab-pane name="账号信息" tab="账号信息">
      <n-form class="py-4" :model="user" :rules="rules" ref="userRef">
        <n-form-item path="username" label="登录名">
          <n-input v-model:value="user.username" disabled />
        </n-form-item>
        <n-form-item path="password" label="密码">
          <n-input
            v-model:value="user.password"
            placeholder="请输入修改的密码"
          />
        </n-form-item>
        <n-form-item path="repassword" label="确定密码">
          <n-input
            v-model:value="user.repassword"
            placeholder="请确认输入的密码"
            type="password"
          />
        </n-form-item>
        <n-form-item path="tel" label="联系电话">
          <n-input v-model:value="user.tel" placeholder="请输入修改的电话" />
        </n-form-item>
        <n-form-item path="address" label="地址">
          <n-input
            v-model:value="user.address"
            placeholder="请输入修改的地址"
          />
        </n-form-item>
        <n-form-item>
          <n-button @click="handleEdit" type="primary">修改</n-button>
        </n-form-item>
      </n-form>
    </n-tab-pane>
    <n-tab-pane name="待收货订单" tab="待收货订单">
      <order-list :status="2"></order-list>
    </n-tab-pane>
    <n-tab-pane name="全部订单" tab="全部订单">
      <order-list></order-list>
    </n-tab-pane>
  </n-tabs>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import {
  useMessage,
  NTabs,
  NTabPane,
  NForm,
  NFormItem,
  NInput,
  NButton,
} from "naive-ui";

import { useUser } from "../hooks/UseUsers";
import OrderList from "../components/OrderList.vue";

export default defineComponent({
  name: "UserInfo",
  components: {
    useMessage,
    NTabs,
    NTabPane,
    NForm,
    NFormItem,
    NInput,
    NButton,
    OrderList,
  },
  setup() {
    const message = useMessage();
    const { user, getUser, updateUser } = useUser();
    const userRef = ref<typeof NForm | null>(null);

    const rules = ref({
      password: {
        required: true,
        message: "请输入会员密码",
        trigger: "blur",
      },
      repassword: {
        required: true,
        validator(rules: any, value: string) {
          if (!value) {
            return new Error("请确认输入的密码");
          } else if (value != user.value.password) {
            return new Error("输入的会员密码不一致");
          }
          return true;
        },
        trigger: "blur",
      },
      tel: {
        required: true,
        validator(rules: any, value: string) {
          if (!value) {
            return new Error("请输入联系电话");
          } else if (!/^\d{11}$/.test(value)) {
            return new Error("手机号码格式不正确");
          }
          return true;
        },
        trigger: ["blur", "input"],
      },
      address: {
        required: true,
        message: "请输入收货地址",
        trigger: "blur",
      },
    });

    getUser();

    watch(
      () => user.value.tel,
      (tel) => {
        user.value.tel = `${tel}`;
      }
    );

    const handleEdit = () => {
      userRef.value?.validate(async (e: any) => {
        if (!e) {
          try {
            await updateUser(user.value);
            getUser();
            message.success("修改成功");
          } catch (e) {
            message.error("修改失败");
          }
        } else {
          message.error("请检查输入的字段");
        }
      });
    };
    return { user, userRef, rules, handleEdit };
  },
});
</script>

<style></style>
